<template>
<LayoutNav></LayoutNav>
<div class="container">
  <div class="search-page">
    <!-- 搜索类别切换 -->
    <div class="search-types">
      <el-radio-group 
        v-model="activeType" 
        fill="#FA5566"
        v-if="availableTypes.length > 0"
      >
        <el-radio-button 
          v-for="type in availableTypes" 
          :key="type.value"
          :label="type.value"
        >
          {{ type.label }}
        </el-radio-button>
      </el-radio-group>
      
      <!-- 当没有可用搜索类型时显示提示 -->
      <el-empty 
        v-else
        description="暂无可用的搜索功能"
      />
    </div>

    <!-- 搜索框 -->
    <div class="search-box">
      <el-input
        v-model="searchKeyword"
        :placeholder="getPlaceholder"
        class="search-input"
      >
      </el-input>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
    </div>

    <!-- 服装分类筛选 -->
    <div class="filter-section" v-if="activeType === 'clothes'">
      <span class="filter-label">分类筛选：</span>
      <el-tag
        v-for="tag in filterTags"
        :key="tag.value"
        :type="selectedFilters.includes(tag.value) ? '' : 'info'"
        effect="plain"
        class="filter-tag"
        @click="toggleFilter(tag.value)"
      >
        {{ tag.label }}
      </el-tag>
    </div>

    <!-- 实体店筛选条件 -->
    <div class="filter-section" v-if="activeType === 'store'">
      <span class="filter-label">类型1</span>
      <el-select v-model="wholesaleFilters.grade" placeholder="请选择">
        <el-option label="条件1" value="1" />
        <el-option label="条件2" value="2" />
      </el-select>
      
      <span class="filter-label" style="margin-left: 20px">类型1：</span>
      <el-select v-model="wholesaleFilters.type1" placeholder="请选择">
        <el-option label="条件1" value="1" />
        <el-option label="条件2" value="2" />
        <el-option label="条件3" value="3" />
      </el-select>
    </div>

    <!-- 批发商筛选条件 -->
    <div class="filter-section" v-if="activeType === 'wholesale'">
      <span class="filter-label">档口类型</span>
      <el-select v-model="wholesaleFilters.grade" placeholder="请选择">
        <el-option label="一档" value="1" />
        <el-option label="二档" value="2" />
      </el-select>
      
      <span class="filter-label" style="margin-left: 20px">类型1：</span>
      <el-select v-model="wholesaleFilters.type1" placeholder="请选择">
        <el-option label="条件1" value="1" />
        <el-option label="条件2" value="2" />
        <el-option label="条件3" value="3" />
      </el-select>
    </div>

    <!-- 工厂筛选条件 -->
    <div class="filter-section" v-if="activeType === 'factory'">
      <span class="filter-label">类型1：</span>
      <el-select v-model="factoryFilters.type1" placeholder="请选择">
        <el-option label="条件1" value="1" />
        <el-option label="条件2" value="2" />
        <el-option label="条件3" value="3" />
      </el-select>
      
      <span class="filter-label" style="margin-left: 20px">类型2：</span>
      <el-select v-model="factoryFilters.type2" placeholder="请选择">
        <el-option label="条件1" value="1" />
        <el-option label="条件2" value="2" />
        <el-option label="条件3" value="3" />
      </el-select>
    </div>

    <!-- 搜索结果列表 -->
    <div class="search-results">
      <!-- 服装商品列表 -->
      <template v-if="activeType === 'clothes'">
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in clothesList" :key="item.id">
            <el-card class="clothes-card" shadow="hover"  @click="goToGoodDetail(item.id)">
              <div class="clothes-image">
                <el-image :src="item.image" fit="cover"/>
              </div>
              <div class="clothes-info">
                <h4 class="clothes-name" :title="item.name">{{ item.name }}</h4>
                <p class="clothes-desc" :title="item.description">{{ item.description }}</p>
                <div class="clothes-price">
                  <span class="price">¥{{ item.price }}</span>
                  <span class="unit">/件</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </template>

      <!-- 实体店列表 -->
      <template v-if="activeType === 'store'">
        <el-row :gutter="20">
          <el-col :span="8" v-for="item in storeList" :key="item.id">
            <el-card class="store-card" shadow="hover" @click="goToStoreDetail(item.id)">
              <div class="store-images">
                <el-image 
                  v-for="(img, index) in item.images" 
                  :key="index"
                  :src="img" 
                  fit="cover"
                />
              </div>
              <div class="store-info">
                <h3>{{ item.name }}</h3>
                <div class="company-info">
                  <span>{{ item.company }}</span>
                  <span>{{ item.location }}</span>
                </div>
                <div class="sales">
                  <span>店铺销量{{ item.sales }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </template>

      <!-- 批发商列表 -->
      <template v-if="activeType === 'wholesale'">
        <el-card v-for="item in wholesalerList" :key="item.id" class="company-card" @click="goToWholesalerDetail(item.id)">
          <div class="company-info">
            <h3>{{ item.name }}</h3>
            <p>{{ item.description }}</p>
            <div class="company-meta">
              <span>{{ item.location }}</span>
              <span>销量{{ item.sales }}</span>
            </div>
          </div>
        </el-card>
      </template>

      <!-- 工厂列表 -->
      <template v-if="activeType === 'factory'">
        <el-card v-for="item in factoryList" :key="item.id" class="company-card"  @click="goToFactoryDetail(item.id)">
          <div class="company-info">
            <h3>{{ item.name }}</h3>
            <p>{{ item.description }}</p>
            <div class="company-meta">
              <span>{{ item.location }}</span>
              <span>产能：{{ item.capacity }}</span>
              <el-rate v-model="item.rating" disabled />
            </div>
          </div>
        </el-card>
      </template>

      <!-- 众筹列表 -->
      <template v-if="activeType === 'crowdfunding'">
        <el-card v-for="item in crowdfundingList" :key="item.id" class="crowdfunding-card">
          <RouterLink :to="{name: 'crowdFundingDetail', params: {projectid: item.id}}" class="project-item">
            <div class="item-img">
              <img :src="item.image" alt="项目图片">
            </div>
            <div class="main">
                <p class="title">{{ item.title }}</p>
                <p class="target">发起人: {{ item.initiator }}</p>
                <p class="target">目标数量: {{ item.targetQuantity }}</p>
                <p class="participants">已参与人数: {{ item.participants }}</p>
                <p class="time">众筹持续时间: {{ item.startime }} 至{{ item.endtime }}</p>
            </div>           
          </RouterLink>
        </el-card>
      </template>

    </div>
  </div>
</div>
<LayoutFooter/>
</template>

<script setup>
import { ref, computed } from 'vue'
import LayoutNav from '../Layout/components/LayoutNav.vue';
import LayoutFooter from '../Layout/components/LayoutFooter.vue';
import { useTokenStore } from '@/store/token';
import { useRouter } from 'vue-router' // 确保引入useRouter

// 用户信息
const tokenStore = useTokenStore()
const user = tokenStore.user;

// 根据用户身份获取可用的搜索类型
const availableTypes = computed(() => {
  const identity = user.identity
  switch(identity) {
    case '0': // 普通会员
      return [{
        label: '找实体店',
        value: 'store'
      }]
    case '1': // 实体店
      return [
        {
          label: '找服装',
          value: 'clothes'
        },
        {
          label: '找批发商',
          value: 'wholesale'
        },
        {
          label: '找加工厂',
          value: 'factory'
        },
        {
          label: '众筹浏览',
          value: 'crowdfunding'
        }
      ]
    case '2': // 批发商
      return [
        {
          label: '找加工厂',
          value: 'factory'
        },
        {
          label: '众筹浏览',
          value: 'crowdfunding'
        }
      ]
    case '3': // 加工厂
      return [] // 什么都不能看
    default:
      return []
  }
})

// 设置默认选中的类型(取第一个可用类型,如果没有则为空)
const activeType = ref(availableTypes.value[0]?.value || '')



// 搜索关键词
const searchKeyword = ref('')
// 选中的筛选标签
const selectedFilters = ref([])

// 搜索框占位符
const getPlaceholder = computed(() => {
  const placeholders = {
    clothes: '请输入服装关键词搜索',
    store: '请输入批发商名称搜索',
    wholesale: '请输入批发商名称搜索',
    factory: '请输入工厂名称搜索',
    crowdfunding: '请输入众筹项目关键词搜索'
  }
  return placeholders[activeType.value]
})

// 筛选标签
const filterTags = [
  { label: '上衣', value: 'tops' },
  { label: '裤装', value: 'pants' },
  { label: '裙装', value: 'dresses' },
  { label: '外套', value: 'outerwear' }
]
// 批发商筛选条件
const wholesaleFilters = ref({
  grade: '',
  type1: ''
})

// 工厂筛选条件
const factoryFilters = ref({
  type1: '',
  type2: ''
})

// 模拟数据
const storeList = ref([
  {
    id: 1,
    name: '商务休闲衬衫',
    company: '桃褶服装股份有限公司',
    location: '贵州省贵阳市花溪区清溪路',
    rating: 4.8,
    sales:120,
    images: [
      'https://via.placeholder.com/150',
      'https://via.placeholder.com/150',
      'https://via.placeholder.com/150'
    ]
  },
    {
    id: 1,
    name: '商务休闲衬衫',
    company: '桃褶服装股份有限公司',
    location: '贵州省贵阳市花溪区清溪路',
    rating: 4.8,
    sales:120,
    images: [
      'https://via.placeholder.com/150',
      'https://via.placeholder.com/150',
      'https://via.placeholder.com/150'
    ]
  },
    {
    id: 1,
    name: '商务休闲衬衫',
    company: '桃褶服装股份有限公司',
    location: '贵州省贵阳市花溪区清溪路',
    rating: 4.8,
    sales:120,
    images: [
      'https://via.placeholder.com/150',
      'https://via.placeholder.com/150',
      'https://via.placeholder.com/150'
    ]
  },
    {
    id: 1,
    name: '商务休闲衬衫',
    company: '桃褶服装股份有限公司',
    location: '贵州省贵阳市花溪区清溪路',
    rating: 4.8,
    sales:120,
    images: [
      'https://via.placeholder.com/150',
      'https://via.placeholder.com/150',
      'https://via.placeholder.com/150'
    ]
  },
  // ... 更多数据
])

const clothesList = ref([
  {
    id: 1,
    name: '时尚休闲衬衫',
    description: '2024春季新款 商务休闲修身款',
    price: 128,
    image: 'https://via.placeholder.com/300x400'
  },
  {
    id: 2,
    name: '简约百搭T恤',
    description: '纯棉面料 多色可选',
    price: 89,
    image: 'https://via.placeholder.com/300x400'
  },
  {
    id: 3,
    name: '牛仔直筒裤',
    description: '高腰显瘦 经典款式',
    price: 199,
    image: 'https://via.placeholder.com/300x400'
  },
  {
    id: 4,
    name: '春季连衣裙',
    description: '甜美淑女 气质款',
    price: 268,
    image: 'https://via.placeholder.com/300x400'
  },
  // ... 更多数据
])

const wholesalerList = ref([
  {
    id: 1,
    name: '桃褶服装股份有限公司',
    description: '工厂直销时尚潮流服饰，满足你的个性需求',
    location: '贵州省贵阳市花溪区清溪路',
    sales: '10000',
    rating: 4.8
  },
    {
    id: 1,
    name: '桃褶服装股份有限公司',
    description: '工厂直销时尚潮流服饰，满足你的个性需求',
    location: '贵州省贵阳市花溪区清溪路',
    sales: '10000',
    rating: 4.8
  },
  // ... 更多数据
])

const factoryList = ref([
  {
    id: 1,
    name: '桃褶服装股份有限公司',
    description: '专业服装加工制造',
    location: '贵州省贵阳市花溪区清溪路',
    capacity: '月产10000件',
    rating: 4.8
  },
  // ... 更多数据
])

const crowdfundingList = ref([
    {
    id:1,
    image: 'https://cbu01.alicdn.com/img/ibank/2019/830/974/10449479038_998666923.jpg',
    title: '可持续时尚:环保T恤系列',
    initiator:'张三',
    targetQuantity: 500,
    participants: 200,
    startime: '2023-03-01',
    endtime:'2023-05-10'
  },
    {
    id:2,
    image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.k4VWpMVQWgzNJ-2aMPDY1QHaHa?pid=ImgDet&w=474&h=474&rs=1',
    title: '舒适亲肤，防晒吸汗T恤',
    initiator:'张三',
    targetQuantity: 300,
    participants: 150,
    duration: 45,
    startime: '2023-03-01',
    endtime:'2023-05-10'
    },
    {
    id:1,
    image: 'https://cbu01.alicdn.com/img/ibank/2019/830/974/10449479038_998666923.jpg',
    title: '可持续时尚:环保T恤系列',
    initiator:'张三',
    targetQuantity: 500,
    participants: 200,
    startime: '2023-03-01',
    endtime:'2023-05-10'
  },
      {
    id:2,
    image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.k4VWpMVQWgzNJ-2aMPDY1QHaHa?pid=ImgDet&w=474&h=474&rs=1',
    title: '舒适亲肤，防晒吸汗T恤',
    targetQuantity: 300,
    initiator:'张三',
    participants: 150,
    duration: 45,
    startime: '2023-03-01',
    endtime:'2023-05-10'
  }
]);


// 处理搜索
const handleSearch = () => {
  console.log('搜索类型:', activeType.value)
  console.log('搜索关键词:', searchKeyword.value)
  console.log('选中的筛选条件:', selectedFilters.value)
  // 这里添加实际的搜索逻辑
  
}

// 切换筛选标签
const toggleFilter = (value) => {
  const index = selectedFilters.value.indexOf(value)
  if (index === -1) {
    selectedFilters.value.push(value)
  } else {
    selectedFilters.value.splice(index, 1)
  }
}

// 跳转到详情页方法
const router = useRouter()
//跳转商品详情
const goToGoodDetail = (id) => {
  const routeData = router.resolve({
    name: 'goodDetail',
    params: { goodid: id }
  })
  // 在新窗口打开
  window.open(routeData.href, '_blank')
}
//跳转实体店详情
const goToStoreDetail = (id) => {
  const routeData = router.resolve({
    name: 'storeDetail',
    params: { storeid: id }
  })
  // 在新窗口打开
  window.open(routeData.href, '_blank')
}
//跳转批发商详情
const goToWholesalerDetail = (id) => {
  const routeData = router.resolve({
    name: 'wholesalerDetail',
    params: { wholesalerid: id }
  })
  // 在新窗口打开
  window.open(routeData.href, '_blank')
}
// 跳转工厂详情
const goToFactoryDetail = (id) => {
  const routeData = router.resolve({
    name: 'factoryDetail',
    params: { factoryid: id }
  })
  // 在新窗口打开
  window.open(routeData.href, '_blank')
}

</script>

<style scoped lang="scss">
.search-page {
  padding: 20px;
}

.search-types {
  margin-bottom: 20px;
  text-align: center;
  :deep(.el-radio-group) {
    .el-radio-button {
      margin-right: 20px;
      
      &:last-child {
        margin-right: 0;
      }
      
      .el-radio-button__inner {
        border: none;
        background: none;
        padding: 0 10px;
        height: 40px;
        line-height: 40px;
        color: #666;
        font-size: 16px;
        // 移除默认背景色和边框
        background-color: transparent !important; // 使用 !important 确保覆盖
        border-color: transparent !important;
        box-shadow: none !important;
        
        &:hover {
          color: #FA5566;
        }
      }
      
      &.is-active {
        .el-radio-button__inner {
          color: #FA5566;
          box-shadow: none;
          position: relative;          
          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 2px;
            background: #FA5566;
            border-radius: 1px;
          }
        }
      }
    }
    
    // 移除默认边框和圆角
    .el-radio-button:first-child .el-radio-button__inner {
      border: none;
      border-radius: 0;
    }
    
    .el-radio-button:last-child .el-radio-button__inner {
      border: none;
      border-radius: 0;
    }
  }
}

.search-box {
  max-width: 600px;
  margin: 0 auto 20px;
  display: flex;
  .search-input {
    width: 100%;
  }
  .el-button {
    margin-left: 20px;
    width: 80px;
  }
}

.filter-section {
  margin: 20px 0;
  display: flex;
  align-items: center;
  .el-select {
    width: 150px;
  }
}

.filter-label {
  margin-right: 10px;
  color: #606266;
}

.filter-tag {
  margin-right: 10px;
  cursor: pointer;
}

.clothes-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.clothes-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.clothes-image {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.clothes-image .el-image {
  width: 100%;
  height: 100%;
  transition: all 0.3s;
}

.clothes-image .el-image:hover {
  transform: scale(1.05);
}

.clothes-info {
  padding: 10px;
}

.clothes-name {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clothes-desc {
  margin: 8px 0;
  font-size: 14px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clothes-price {
  display: flex;
  align-items: baseline;
}

.clothes-price .price {
  font-size: 18px;
  font-weight: bold;
  color: #ff4400;
}

.clothes-price .unit {
  margin-left: 4px;
  font-size: 12px;
  color: #999;
}

/* 响应式布局 */
@media screen and (max-width: 1200px) {
  .el-col {
    width: 25%;
  }
}

@media screen and (max-width: 992px) {
  .el-col {
    width: 33.33%;
  }
}

@media screen and (max-width: 768px) {
  .el-col {
    width: 50%;
  }
}

@media screen and (max-width: 576px) {
  .el-col {
    width: 100%;
  }
}

.store-card {
  margin-bottom: 20px;
}

.store-images {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.store-images .el-image {
  width: 100px;
  height: 100px;
}

.store-info h3 {
  margin: 0 0 10px 0;
}

.company-info {
  color: #606266;
  font-size: 14px;
  margin-bottom: 10px;
}

.rating {
  display: flex;
  align-items: center;
  gap: 10px;
}

.company-card {
  margin-bottom: 20px;
}

.company-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
  color: #909399;
}

.crowdfunding-card{
    margin-top:20px;    
    .project-item{
        display: flex;
        background: #fff;
        margin-bottom: 20px;
        margin-bottom: 20px;
        transition: all .5s;

        img{
            width: 200px;
            height: 200px;
        }
        .main{
            margin-left: 20px;
            .title{
                font-size: 24px;
                padding: 10px;
            }
            p{
                font-size: 18px;
                padding: 5px 0 5px 10px;
            }
        }
    }
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }
}
</style>